import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import Select from "@material-ui/core/Select";
import Input from "@material-ui/core/Input";
import FilledInput from "@material-ui/core/FilledInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { FormDatePicker, FormTimePicker, MuiPickersUtilsProvider, DateFnsUtils } from "./DatePicker";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormLabel from "@material-ui/core/FormLabel";

import $ from "jquery";

var fieldMap = {};

// fields =[{type:"text",name:"username" ,id:"1" }] options:[{value:"1",label:"one"}]
export default function GridForm(props) {
	var fields = props.fields;
	return (
		<MuiPickersUtilsProvider utils={DateFnsUtils}>
			<Grid container spacing={1} {...props}>
				{fields.map((f) => {
					return fieldMap[f.type || "text"].call(props, f);
				})}
			</Grid>
		</MuiPickersUtilsProvider>
	);
}

fieldMap["text"] = function GridText(props) {
	var {xs ,margin,inputProps, ...ps} = { ...props }; //value={this.values[props.name]} 
	return (
		<Grid item xs={xs || 6} key={"text_" + (props.id || props.name)}>
			<TextField margin={margin||"dense"} fullWidth {...ps} inputProps={inputProps} /> 
		</Grid>
	);
};
fieldMap["number"] = fieldMap["text"];
fieldMap["password"] = fieldMap["text"];
fieldMap["hidden"] = function Hidden(props) {
	return <input key={"hidden_"+(props.id || props.name)} {...props}></input>
}
fieldMap["date"] = function GridDate(props) {
	var {type ,margin, xs ,...ps} = { ...props };
	return (
		<Grid item xs={xs || 6} key={"data_" + (props.id || props.name)}>
			<FormDatePicker margin={margin||"dense"} fullWidth {...ps} />
		</Grid>
	);
};
fieldMap["time"] = function GridTime(props) {
	var {type ,margin, xs ,...ps} = { ...props };
	return (
		<Grid item xs={xs || 6} key={"time_" + (props.id || props.name)}>
			<FormTimePicker margin={margin||"dense"} fullWidth {...ps} />
		</Grid>
	);
};

fieldMap["select"] = function GridSelect(props) {
	var {type,xs,disabled,margin,inputProps,...ps} = props
	return (
		<Grid item xs={xs || 6} key={"select_" + (props.id || props.name)} >
			<FormControl fullWidth margin={margin || "dense"} disabled={disabled}>
				<InputLabel>{props.label}</InputLabel>
				<Select
					native
					inputProps={{
						name: props.name,
						...inputProps
					}}
					{...ps}
				>
					<option aria-label="None" value="" />
					{props.options.map((o) => {
						return (
							<option value={o.value} key={o.value}>
								{o.label}
							</option>
						);
					})}
				</Select>
			</FormControl>
		</Grid>
	);
};

fieldMap["switch"] = function GridSwitch(props) {
	var {type,xs,margin,inputProps} = props
	return (
		<Grid item xs={xs || 6} key={"switch_" + (props.id || props.name)}>
			<FormControlLabel
				labelPlacement="top"
				control={<Switch checked={props.value} color="primary" name={props.name} />}
				label={props.label}
			/>
		</Grid>
	);
};

fieldMap["radio"] = function GridRadio(props) {
	var {type,xs,margin,inputProps} = props
	// const [value, setValue] = React.useState(props.value);

	const handleChange = (event) => {
		props.setValue(event.target.value);
	};
	return (
		<Grid item xs={props.xs || 6} key={"radio_" + (props.id || props.name)}>
			<FormControl component="fieldset" margin="dense">
				<FormLabel component="legend">{props.label}</FormLabel>
				<RadioGroup aria-label={props.label} name={props.name} value={props.value} onChange={handleChange} row>
					{props.options.map((o) => {
						return <FormControlLabel value={o.value} key={o.label} control={<Radio />} label={o.label} />;
					})}
				</RadioGroup>
			</FormControl>
		</Grid>
	);
};
fieldMap["checkbox"] = function GridRadio(props) {
	console.log(props.options)
	var initState = props.options.reduce((p,c,i)=>{
		p[c.name||c.label]=c.value
		return p
	},{})
	const [state, setState] = React.useState(initState);

	const handleChange = (event) => {
		setState({ ...state, [event.target.name]: event.target.checked });
	};
	return (
		<Grid item xs={props.xs || 6} key={"checkbox_" + (props.id || props.name)}>
			<FormControl component="fieldset" margin="dense">
				<FormLabel component="legend">{props.label}</FormLabel>
				<FormGroup row>
					{props.options.map((o) => {
						return (
							<FormControlLabel
								key={o.name||o.label}
								control={<Checkbox checked={state[o.name||o.label]} onChange={handleChange} name={o.name||o.label} />}
								label={o.label}
							/>
						);
					})}
				</FormGroup>
			</FormControl>
		</Grid>
	);
};
fieldMap["file"] = function GridFile(props) {
	var {xs,label,...ps} = props
	return (
		<Grid item xs={xs || 6} key={"grid_" + (props.id || props.name)}>
			{/* <FormControl> */}
			<InputLabel style={{ marginBottom: "4px" }} htmlFor={"gridfile_" + label}>
				{label}
			</InputLabel>
			<input type="file" id={"gridfile_" + props.label} {...ps}/>
			{/* </FormControl> */}
		</Grid>
	);
};
fieldMap["button"] = function GridButton(props) {
	return (
		<Grid item xs={props.xs || 6} key={"button_" + (props.id || props.name)}>
			<Button variant="contained" color="primary" {...props}>{props.label}</Button>
		</Grid>
	);
};
